<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jquery任务栏</title>

	<link rel="stylesheet" type="text/css" href="style/task-bar.css">
	<style type="text/css">
	html,body{
		width: 100%;
		height: 100%;
		background: #000;
	}
	.box{
		color: #fff;
		display: inline-block;
		height: 50%;
		width: calc(50% - 4px);
		position: relative;
		top: 0;
		left: 0;
	}
	.box:nth-child(1){
		background: url(image/1.jpg);
		background-size: cover;
	}
	.box:nth-child(2){
		background: url(image/2.jpg);
		background-size: cover;
	}
	.box:nth-child(3){
		background: url(image/3.jpg);
		background-size: cover;
	}
	.content-table{
		border-color: #fff;
		width: 100%;
		height: 100%;
	}
	.content-table .theader{
		text-align: center;
	}
	</style>
</head>
<body>
	<div id="box1" class="box">仅限任务栏在容器1中活动</div>
	<div id="box2" class="box">容器2，options.content可配置dom元素，将dom结构加载到任务栏中</div>
	<div id="box3" class="box">
		容器3，任务栏插件功能使用
		<button id="taskBarMaxBtn">最大化</button>
		<button id="taskBarMinBtn">最小化</button>
		<button id="taskBarCloseBtn">关闭</button>
	</div>

	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
	<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
	<script src="js/task-bar.js" type="text/javascript"></script>
	<script type="text/javascript">
		// 容器1
		var taskBar1 = new TaskBar($('#box1'), {
			position: 'left-top'
		});

		// 容器2
		var taskBar2 = new TaskBar($('#box2'), {
			title: '任务栏标题2任务栏标题2任务栏标题2任务栏标题2',
			width: 300,
			height: 150,
			position: 'right-top',
			content: $('<table class="content-table" cellspacing="0" cellpadding="0" border="1">'
				+ '<tr class="theader">'
					+ '<td>标题1</td><td>标题2</td><td>标题3</td><td>标题4</td>'
				+ '</tr>'
				+ '<tr>'
					+ '<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>'
				+ '</tr>'
				+ '<tr>'
					+ '<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>'
				+ '</tr>'
				+ '<tr>'
					+ '<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>'
				+ '</tr>'
				+ '<tr>'
					+ '<td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td>'
				+ '</tr>'
			+ '</table>'),
			contentStyle: {
				'color': 'black'
			}
		});

		// 容器3
		var taskBar3 = new TaskBar($('#box3'), {
			title: '任务栏标题3',
			width: 300,
			height: 150,
			position: 'left-bottom',
			content: $('<div>我在任务栏3左下角 <button id="myBtn">抖一抖</button></div>'),
			contentStyle: {
				'text-align': 'center'
			}
		});
		taskBar3.getTaskBar().find('#myBtn').click(function(){
			taskBar3.getTaskBar().effect('shake');
		});
		$('#taskBarMaxBtn').click(function(){
			taskBar3.maximize(function(){
				console.log('点击最大化任务栏3');
			});
		});
		$('#taskBarMinBtn').click(function(){
			taskBar3.minimize(function(){
				console.log('点击最小化任务栏3');
			});
		});
		$('#taskBarCloseBtn').click(function(){
			taskBar3.close(function(){
				console.log('关闭任务栏3');
			});
		});

		// 容器body
		var taskBarBody = new TaskBar({
			title: '任务栏标题body',
			width: 500,
			height: 250,
			position: 'right-bottom',
			content: $('<div>我被限制在body里面<button id="myBtn2">抖一抖</button></div>'),
			contentStyle: {
				'text-align': 'center',
				'background': 'url(image/4.jpg)',
				'background-size': 'cover'
			}
		});
		taskBarBody.getTaskBar().find('#myBtn2').click(function(){
			taskBarBody.getTaskBar().effect('shake');
		});
	</script>
</body>
</html>